<template>
  <div class="patTable px-5 py-4 bg-white">
    <HeadTitle text="患者管理"/>
    <div class="flex">
      <span
        v-for="(item, index) in report"
        :key="index"
        :class="[index == queryParams.visitStatus ? 'pat_Active' : '', 'pat_item']"
        @click=";(queryParams.visitStatus = index),(queryNursing.visitStatus = index), getList(), usePatient.setVisitStatus(index)"
      >{{ item }}</span
      >
    </div>
    <!-- 搜索 -->
    <div v-if="queryParams.visitStatus == 1" class="mt-5 l-t-search">
      <div class="l-t-s-input">
        <el-date-picker v-model="queryParams.endTime" type="date" value-format="YYYY-MM-DD" placeholder="选择解绑日期"
                        @change="getList" clearable style="display: flex; width: 100%;"/>
      </div>
    </div>
    <div class="mt-5 l-t-search">
      <div class="l-t-s-input">
        <el-input v-model="queryParams.keyWord" placeholder="证件号/序列号/设备号/名字" prefix-icon="search" clearable
                  @clear="getList">
          <template #append>
            <div @click="getList" class="cursor-pointer">搜索</div>
          </template>
        </el-input>
      </div>

      <div class="l-t-s-batch-print-icon" title="整点护理数据">
        <svg @click="hourlyDataDialog = true" aria-hidden="true" class="w-6 h-6">
          <use xlink:href="#icon-report_green"/>
        </svg>
      </div>

      <div class="l-t-s-batch-print-icon" title="打印">
        <svg v-if="!batchDisabled" @click="printShow = true" aria-hidden="true" class="print w-6 h-6">
          <use xlink:href="#icon-print"/>
        </svg>
        <svg v-if="batchDisabled" aria-hidden="true" class="print w-6 h-6">
          <use xlink:href="#icon-print-gay"/>
        </svg>
      </div>
    </div>
    <!-- 表格 -->
    <div class="mt-3 w-full">
      <Table
        :column="tableColumn"
        :table-data="patientList"
        :option="option"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      >
        <template #btn>
          <span class="fill">填写诊断</span>
        </template>
      </Table>
    </div>
  </div>

  <el-dialog v-model="printShow" title="选择打印报告" width="500px" :close-on-click-modal="false">
    <div>报告项目：</div>
    <el-checkbox-group v-model="printCheckList">
      <el-checkbox label="heart">脉率</el-checkbox>
      <el-checkbox label="spo2">血氧</el-checkbox>
      <el-checkbox label="temp">体温</el-checkbox>
    </el-checkbox-group>

    <span slot="footer">
      <el-button type="primary" @click="print">确 定</el-button>
      <el-button @click="printShow = false">取 消</el-button>
    </span>
  </el-dialog>

  <el-dialog v-model="hourlyDataDialog" title="整点护理信息"
             @open="reqHourlyData" @close="initReqHourlyParam" :close-on-click-modal="false">

    <el-row>
      <el-form :model="queryNursing" :inline="true">
        <el-form-item label="护理日期">
          <el-date-picker v-model="queryNursing.nursingDay" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
                          @change="reqHourlyData" :clearable="false"/>
        </el-form-item>
        <el-form-item label="就诊状态">
          <el-select v-model="queryNursing.visitStatus" placeholder="全部" clearable @change="reqHourlyData" style="width: 220px;">
            <el-option label="就诊中" :value="0"/>
            <el-option label="已结束" :value="1"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <el-alert title="体温数据 * 代表疑似体温传感器未佩戴规范；脉率、血氧数据显示 / 代表监测数据明显异常。" type="warning" :closable="false" show-icon style="margin-bottom: 10px;" />
    <el-table :data="hourlyData" v-loading="hourlyDataLoading" size="small" style="width: 100%" height="400">
      <el-table-column prop="name" fixed label="姓名" width="80" align="center"/>
      <el-table-column prop="age" fixed label="年龄" width="50" align="center"/>
      <el-table-column prop="bedNo" fixed label="床位号" width="60" align="center"/>
      <el-table-column prop="diagnosis" fixed label="诊断" width="100" align="center" show-overflow-tooltip="true"/>
      <el-table-column label="00:00" align="center">
        <el-table-column prop="heart_00" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_00 == 70 && scope.row.spo2_00 == 95">/</span>
            <span v-else>{{scope.row.heart_00}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_00" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_00 == 70 && scope.row.spo2_00 == 95">/</span>
            <span v-else>{{scope.row.spo2_00}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_00" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_00 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_00}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="01:00" align="center">
        <el-table-column prop="heart_01" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_01 == 70 && scope.row.spo2_01 == 95">/</span>
            <span v-else>{{scope.row.heart_01}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_01" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_01 == 70 && scope.row.spo2_01 == 95">/</span>
            <span v-else>{{scope.row.spo2_01}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_01" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_01 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_01}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="02:00" align="center">
        <el-table-column prop="heart_02" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_02 == 70 && scope.row.spo2_02 == 95">/</span>
            <span v-else>{{scope.row.heart_02}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_02" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_02 == 70 && scope.row.spo2_02 == 95">/</span>
            <span v-else>{{scope.row.spo2_02}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_02" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_02 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_02}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="03:00" align="center">
        <el-table-column prop="heart_03" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_03 == 70 && scope.row.spo2_03 == 95">/</span>
            <span v-else>{{scope.row.heart_03}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_03" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_03 == 70 && scope.row.spo2_03 == 95">/</span>
            <span v-else>{{scope.row.spo2_03}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_03" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_03 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_03}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="04:00" align="center">
        <el-table-column prop="heart_04" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_04 == 70 && scope.row.spo2_04 == 95">/</span>
            <span v-else>{{scope.row.heart_04}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_04" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_04 == 70 && scope.row.spo2_04 == 95">/</span>
            <span v-else>{{scope.row.spo2_04}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_04" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_04 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_04}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="05:00" align="center">
        <el-table-column prop="heart_05" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_05 == 70 && scope.row.spo2_05 == 95">/</span>
            <span v-else>{{scope.row.heart_05}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_05" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_05 == 70 && scope.row.spo2_05 == 95">/</span>
            <span v-else>{{scope.row.spo2_05}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_05" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_05 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_05}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="06:00" align="center">
        <el-table-column prop="heart_06" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_06 == 70 && scope.row.spo2_06 == 95">/</span>
            <span v-else>{{scope.row.heart_06}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_06" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_06 == 70 && scope.row.spo2_06 == 95">/</span>
            <span v-else>{{scope.row.spo2_06}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_06" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_06 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_06}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="07:00" align="center">
        <el-table-column prop="heart_07" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_07 == 70 && scope.row.spo2_07 == 95">/</span>
            <span v-else>{{scope.row.heart_07}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_07" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_07 == 70 && scope.row.spo2_07 == 95">/</span>
            <span v-else>{{scope.row.spo2_07}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_07" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_07 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_07}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="08:00" align="center">
        <el-table-column prop="heart_08" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_08 == 70 && scope.row.spo2_08 == 95">/</span>
            <span v-else>{{scope.row.heart_08}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_08" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_08 == 70 && scope.row.spo2_08 == 95">/</span>
            <span v-else>{{scope.row.spo2_08}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_08" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_08 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_08}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="09:00" align="center">
        <el-table-column prop="heart_09" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_09 == 70 && scope.row.spo2_09 == 95">/</span>
            <span v-else>{{scope.row.heart_09}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_09" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_09 == 70 && scope.row.spo2_09 == 95">/</span>
            <span v-else>{{scope.row.spo2_09}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_09" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_09 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_09}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="10:00" align="center">
        <el-table-column prop="heart_10" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_10 == 70 && scope.row.spo2_10 == 95">/</span>
            <span v-else>{{scope.row.heart_10}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_10" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_10 == 70 && scope.row.spo2_10 == 95">/</span>
            <span v-else>{{scope.row.spo2_10}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_10" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_10 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_10}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="11:00" align="center">
        <el-table-column prop="heart_11" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_11 == 70 && scope.row.spo2_11 == 95">/</span>
            <span v-else>{{scope.row.heart_11}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_11" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_11 == 70 && scope.row.spo2_11 == 95">/</span>
            <span v-else>{{scope.row.spo2_11}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_11" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_11 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_11}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="12:00" align="center">
        <el-table-column prop="heart_12" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_12 == 70 && scope.row.spo2_12 == 95">/</span>
            <span v-else>{{scope.row.heart_12}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_12" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_12 == 70 && scope.row.spo2_12 == 95">/</span>
            <span v-else>{{scope.row.spo2_12}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_12" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_12 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_12}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="13:00" align="center">
        <el-table-column prop="heart_13" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_13 == 70 && scope.row.spo2_13 == 95">/</span>
            <span v-else>{{scope.row.heart_13}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_13" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_13 == 70 && scope.row.spo2_13 == 95">/</span>
            <span v-else>{{scope.row.spo2_13}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_13" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_13 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_13}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="14:00" align="center">
        <el-table-column prop="heart_14" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_14 == 70 && scope.row.spo2_14 == 95">/</span>
            <span v-else>{{scope.row.heart_14}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_14" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_14 == 70 && scope.row.spo2_14 == 95">/</span>
            <span v-else>{{scope.row.spo2_14}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_14" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_14 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_14}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="15:00" align="center">
        <el-table-column prop="heart_15" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_15 == 70 && scope.row.spo2_15 == 95">/</span>
            <span v-else>{{scope.row.heart_15}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_15" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_15 == 70 && scope.row.spo2_15 == 95">/</span>
            <span v-else>{{scope.row.spo2_15}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_15" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_15 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_15}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="16:00" align="center">
        <el-table-column prop="heart_16" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_16 == 70 && scope.row.spo2_16 == 95">/</span>
            <span v-else>{{scope.row.heart_16}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_16" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_16 == 70 && scope.row.spo2_16 == 95">/</span>
            <span v-else>{{scope.row.spo2_16}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_16" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_16 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_16}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="17:00" align="center">
        <el-table-column prop="heart_17" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_17 == 70 && scope.row.spo2_17 == 95">/</span>
            <span v-else>{{scope.row.heart_17}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_17" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_17 == 70 && scope.row.spo2_17 == 95">/</span>
            <span v-else>{{scope.row.spo2_17}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_17" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_17 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_17}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="18:00" align="center">
        <el-table-column prop="heart_18" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_18 == 70 && scope.row.spo2_18 == 95">/</span>
            <span v-else>{{scope.row.heart_18}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_18" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_18 == 70 && scope.row.spo2_18 == 95">/</span>
            <span v-else>{{scope.row.spo2_18}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_18" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_18 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_18}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="19:00" align="center">
        <el-table-column prop="heart_19" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_19 == 70 && scope.row.spo2_19 == 95">/</span>
            <span v-else>{{scope.row.heart_19}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_19" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_19 == 70 && scope.row.spo2_19 == 95">/</span>
            <span v-else>{{scope.row.spo2_19}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_19" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_19 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_19}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="20:00" align="center">
        <el-table-column prop="heart_20" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_20 == 70 && scope.row.spo2_20 == 95">/</span>
            <span v-else>{{scope.row.heart_20}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_20" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_20 == 70 && scope.row.spo2_20 == 95">/</span>
            <span v-else>{{scope.row.spo2_20}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_20" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_20 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_20}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="21:00" align="center">
        <el-table-column prop="heart_21" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_21 == 70 && scope.row.spo2_21 == 95">/</span>
            <span v-else>{{scope.row.heart_21}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_21" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_21 == 70 && scope.row.spo2_21 == 95">/</span>
            <span v-else>{{scope.row.spo2_21}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_21" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_21 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_21}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="22:00" align="center">
        <el-table-column prop="heart_22" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_22 == 70 && scope.row.spo2_22 == 95">/</span>
            <span v-else>{{scope.row.heart_22}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_22" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_22 == 70 && scope.row.spo2_22 == 95">/</span>
            <span v-else>{{scope.row.spo2_22}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_22" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_22 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_22}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="23:00" align="center">
        <el-table-column prop="heart_23" label="脉率" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_23 == 70 && scope.row.spo2_23 == 95">/</span>
            <span v-else>{{scope.row.heart_23}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spo2_23" label="血氧" width="50" align="center">
          <template #default="scope">
            <span v-if="scope.row.heart_23 == 70 && scope.row.spo2_23 == 95">/</span>
            <span v-else>{{scope.row.spo2_23}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="temperature_23" label="体温" width="50" align="center">
          <template #default="scope">
            <b v-if="scope.row.temperature_23 < 35" style="color: #F56C6C;">*</b>
            <span>{{scope.row.temperature_23}}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
      <el-pagination
        v-model:current-page="queryNursing.page"
        v-model:page-size="queryNursing.pageSize"
        background :size="'small'"
        layout="total, prev, pager, next"
        :total="queryNursing.total"
        @current-change="nursingDataCurrentChange"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="hourlyDataDialog = false"> 确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import {listPatient} from '@/api/patient'
import {reactive, ref, toRefs} from 'vue'
import {usePatientStore} from '@/store/modules/patient'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from "element-plus";
import {getDay} from "@/utils";
import {getHourlyData} from "@/api/patientREG";

const route = useRoute()
const usePatient = usePatientStore()

const report = ref(['就诊中', '已结束'])

// 批量打印患者报告
const batchDisabled = ref(true)
const ids: any = ref([])
const printShow = ref(false)
const printCheckList = ref(['temp', 'spo2', 'heart'])
const router = useRouter()

const mySelectable = (row) => { // 禁用某一行
  return row.useStatus === "1" && row.diagnosis;
}
//表格配置
const tableColumn = [
  {type: 'selection', selectable: mySelectable},
  {prop: 'patientName', label: '姓名', align: 'center', width: '80'},
  {prop: 'bedNo', label: '床号', align: 'center', width: '80'},
  {prop: 'age', label: '年龄', align: 'center', width: '80'},
  {
    label: '操作',
    align: 'center',
    slot: 'btn',
    width: '100'
  }
] as Table.Column[]

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    visitStatus: 0, //0=就诊中；1=已完成
    keyWord: '',
    endTime: '',
  },
  queryNursing: {
    page: 1,
    pageSize: 10,
    total: 0,
    nursingDay: '',
    visitStatus: 0, //0=就诊中；1=已完成
  }
})
const {queryParams} = toRefs(data)

interface State {
  patientList: []
  option: Table.Option
}

const state = reactive<State>({
  patientList: [],
  option: {
    loading: false,
    showPagination: true,
    height: 550,
    highlight: true,
    paginationConfig: {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pagerCount: 3,
      layout: 'total, sizes, prev, pager, next ',
      small: true
    },
    rowStyle: function (obj) {
      let visitTimeStr = obj.row.visitTime;
      if (visitTimeStr) {
        var tempStrs = visitTimeStr.split(" ");
        var timeStrs = tempStrs[1].split(":");
        let hour = timeStrs[0];
        if (queryParams.value.visitStatus == '0' && (hour === '09' || hour === '10')) {
          return {
            background: "#f0f9eb"
          };
        }
      }
    }
  }
})
const {patientList, option} = toRefs(state)

const getList = async () => {
  await listPatient(queryParams.value).then((res: any) => {
    patientList.value = res.rows
    //有患者才会存
    if (patientList.value.length > 0) {
      setCurrentPatient(0)
    }
    if (option.value.paginationConfig) {
      option.value.paginationConfig.total = res.total
    }
  })
}

//点击表格行
const handleRowClick = (row) => {
  setCurrentPatient(row.index)
}
//储存当前患者信息
const setCurrentPatient = (idx: number) => {
  usePatient.setCurrentPatient(patientList.value[idx])
}
/** 分页*/
const handleCurrentChange = (pageNum: number): void => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.currentPage = pageNum
    queryParams.value.pageNum = pageNum
  }
  getList()
}

/** 分页*/
const handleSizeChange = (pageSize: number): void => {
  if (option.value.paginationConfig) {
    option.value.paginationConfig.pageSize = pageSize
    queryParams.value.pageSize = pageSize
  }
  getList()
}

//大屏带过来的
if (route.query.visitNoStr) {
  queryParams.value.keyWord = route.query.visitNoStr as string
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: any) => {
  ids.value = []
  selection.forEach((val) => {
    ids.value.push(val.visitNoStr)
  })
  batchDisabled.value = ids.value.length < 1 || ids.value.length > 5;
  if (ids.value.length > 5) {
    ElMessage.warning('一次性最多打印5份报告！')
  }
}

// 跳转打印页面
const print = () => {
  if (printCheckList.value.length <= 0) {
    ElMessage.warning('请勾选报告！')
  } else {
    localStorage.setItem("dy", JSON.stringify(printCheckList.value));
    localStorage.setItem("visitNos", JSON.stringify(ids.value));
    localStorage.setItem("isMerge", "false");
    router.push({
      name: 'PrintPage',
    })
  }
}

getList()


/** 整点护理信息 相关代码 */
const hourlyDataDialog = ref(false)
const hourlyDataLoading = ref(false)

const {queryNursing} = toRefs(data)
queryNursing.value.nursingDay = getDay() //默认今日日期

interface HourlyState {
  hourlyData: Array<object>
}

const hourlyState = reactive<HourlyState>({
  hourlyData: [
    {
      name: '',
      idNo: '',
      age: 0,
      bedNo: '',
    }
  ]
})
const {hourlyData} = toRefs(hourlyState)
/** 获取列表 */
const reqHourlyData = () => {

  if (queryParams.value.endTime) {
    queryNursing.value.nursingDay = queryParams.value.endTime;
  }

  hourlyDataLoading.value = true;
  let params = {
    page: queryNursing.value.page,
    nursingDay: queryNursing.value.nursingDay,
    visitStatus: queryNursing.value.visitStatus,
  }
  getHourlyData(params).then((res: any) => {
    hourlyDataLoading.value = false;
    hourlyData.value = res.rows;
    queryNursing.value.total = res.total;
  })
}

const initReqHourlyParam = () => {
  queryNursing.value = {
    page: 1,
    pageSize: 10,
    total: 0,
    visitStatus: queryParams.value.visitStatus, //0=就诊中；1=已完成
    nursingDay: getDay()
  }
}
const nursingDataCurrentChange = (pageNum: number): void => {
  queryNursing.value.page = pageNum;
  reqHourlyData();
}
</script>

<style scoped lang="less">
.patTable {
  width: 450px;
  height: 810px;
  border-radius: 6px;

  .pat_item {
    width: 88px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0px;
    color: #4e5969;
    cursor: pointer;
  }

  .pat_Active {
    background: #e8fff8;
    color: #00a991;
    transition: 0.8s;
  }
}
</style>
<style lang="less">
.patTable {
  .el-input .el-input-group__append {
    background-color: var(--el-color-primary);
    color: #fff;
  }

  .el-input__wrapper {
    background-color: #f2f3f5;
  }

  .fill {
    color: var(--el-color-primary);
    font-size: 14px;
  }
}

.l-t-search {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .l-t-s-input {
    width: 80%;
  }

  .l-t-s-batch-print-icon {
    cursor: pointer;
  }
}

.report-time {
  width: 100%;
  margin-bottom: 30px;

  .rep_item {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    margin-left: 10px;
  }

  .rep_Active {
    color: #00a991;
    font-weight: bold;
  }

  .title {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
